<template>
    <div>
        <a-modal
            title="详情"
            :visible="detailBox"
            @cancel="$emit('cancel')"
            :footer="null"
            :destroyOnClose="true"
            width="700px"
            >
            <div class="detail">
                <ul>
                    <div >
                        <slot name="other"></slot>
                    </div>
                    <template v-for="(item,index) in dataList">
                        <li :key="index" v-if="!item.isVisible">
                            <span>{{item.name}}：</span>
                            <slot v-if="item.scopedSlots" :name='item.scopedSlots.customRender'></slot>
                            <span v-else>{{item.info}}</span>
                        </li>
                    </template>
                </ul>
            </div>
        </a-modal>
    </div>
</template>
<script>
export default {
    name:"detailModal",
    props:{dataList:Array,detailBox:Boolean},
}
</script>
<style lang="stylus" scoped>
.detail
    ul
        list-style:none;
        padding:0 10px;
        li
            line-height:30px;
            padding-left:10px;
            border-left:2px solid #ddd;
            margin-top:10px;
            span
                color:#888
                &:nth-child(2)
                    color:#000;
</style>